<template>
  <div id="body" style="width: 100%; height: 100%; overflow: auto">
    <div class="shop-item">
      <div id="root">
        <div class="box">
          <!-- 分类标题 -->
          <div class="box_hd">
            <h2 class="title">旅游产品</h2>
            <div class="more">
              <a href="#"> 查看更多 </a>
            </div>
          </div>
          <div class="">
            <!-- 左边的大图片 -->
            <div class="box_left">
              <!-- <img src="images/ad1.png" width="240" /> -->
            </div>
            <!-- 右边通过v-for循环展示出的内容 -->
            <div class="box_right">
              <ul class="">
                <!-- v-for key值 -->
                <li class="phone_item" v-for="item in itemList" :key="item.id">
                  <a>
                    <!-- 图片 -->
                    <div class="ph">
                      <img :src="getUrl(item.photo)" width="160" />
                    </div>
                    <!-- 手机名字 -->
                    <div class="phone_title">{{ item.name }}</div>
                    <!-- 备注 -->
                    <p class="desc">{{ item.introduction }}</p>
                    <!-- 价格 -->
                    <p class="price">
                      <span>{{ item.prices }}</span>
                      元起
                    </p>
                    <p class="detail">
                      <el-button @click="goItemDetailPage(item)"
                        >查看详情</el-button
                      >
                    </p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <IndexFoot></IndexFoot> -->
  </div>
</template>

<style>
.shop-item ul li {
  display: inline;
}
#body {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/************************************************************ */
.shop-item {
  background-color: #f5f5f5;
}
.box {
  width: 1300px;
  margin: 50px auto 0px;
  /* background-color: #9C82E8; */
}
.box_hd {
  width: 1300px;
  height: 60px;
  line-height: 60px;
  border-bottom: 2px #000000 solid;
  font-size: 18px;
}
.title {
  padding-left: 10px;
  float: left;
}
.more a {
  float: right;
  line-height: 60px;
  color: #000000;
}
.more a:hover {
  color: #ffb217;
}
.box_left {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
.box_right {
  /* float: left; */
}
.phone_item {
  display: block;
  float: left;
  width: 230px;
  height: 360px;
  background-color: #ffffff;
  margin: 15px 0 0 30px;
  margin-top: 20px;
}
/* 手机配图 */
.ph {
  text-align: center;
  margin: 10px 0;
}
/* 手机名称 */
.phone_title {
  color: #000000;
  text-align: center;
  font-size: 18px;
  margin-bottom: 13px;
}
/* 备注 */
.desc {
  color: #7a7c79;
  font-size: 13px;
  text-align: center;
  margin-bottom: 10px;
}
/* 价格 */
.price {
  color: #ffac38;
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}
</style>

<script>
import { select_item_list } from '../api/index'
export default {
  components: {
    // IndexTop,
    // IndexFoot,
  },
  name: 'AboutView',
  data() {
    return {
      itemList: [],
    }
  },
  created() {
    this.selectItemList()
  },
  mounted() {},
  methods: {
    getUrl(url) {
      console.info('url  ' + url)
      let path = `http://localhost:8888/` + url
      console.info('path  ' + path)
      return path
    },
    goItemDetailPage(item) {
      console.info('item:' + item)
      this.$router.push({
        path: '/itemDetail',
        query: {
          itemId: item.iid,
        },
      })
    },
    //获取商品列表
    selectItemList() {
      select_item_list()
        .then((res) => {
          this.itemList = res.map.itemList
        })
        .catch()
    },
  },
}
</script>
